<!-- 番茄钟主界面 -->
<template>
    <div class='tomatoMain'>
        <div class="tomatoMainTop">
            <div class="txtleft">
                空城机の
            </div>
            <div class="txtright">
                番茄钟
            </div>
        </div>
        <!-- 功能列表 -->
        <div class="tomatoMainBottom">
            <div class="function-list">
                <!-- 功能按钮 -->
                <div class="funBtn" @click="changeComponent(2)">
                    <div class="funBtn-one-word">番</div>
                    <div class="funBtn-one-word">茄</div>
                    <div class="funBtn-one-word">钟</div>
                </div>

                <div class="funBtn" @click="changeComponent(3)">
                    <div class="funBtn-one-word">定</div>
                    <div class="funBtn-one-word">时</div>
                    <div class="funBtn-one-word">提</div>
                    <div class="funBtn-one-word">醒</div>
                </div>

                <div class="funBtn" @click="changeComponent(4)">
                    <div class="funBtn-one-word">历</div>
                    <div class="funBtn-one-word">史</div>
                    <div class="funBtn-one-word">活</div>
                    <div class="funBtn-one-word">动</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    props: {},
    data () {
        return {
        };
    },
    mounted() {},
    components: {},
    computed: {},
    methods: {
        // 切换组件  1: 番茄钟  2： 定时提醒 0:主界面
        changeComponent(flag) {
            this.$parent.changeComponent(flag);
        }
    }
}

</script>
<style  lang='less' scoped>
@import url(../../assets/css/common.less);
@font-face {
    font-family: 'xingxing';
    src: url(../../assets/css/xingxing_aigei_com.ttf);
}
@font-face {
    font-family: 'chunlian';
    src: url(../../assets/css/chunlian_aigei_com.ttf);
}

    .tomatoMain {
        .wandh(100%, 100%);
        overflow: hidden;
        .backgroundImg('../../assets/img/main/main_bg01.png');

        .tomatoMainTop {
            .wandh(100%, 40%);
            display: flex;
            .txtleft {
                width: 57%;
                color: #fff;
                font-family: "chunlian";
                font-size: 47px;
                line-height: 40vh;
                text-align: right;
                /* 文字阴影渐变 */
                animation: san 4s linear infinite;
                transform: rotate(-8deg);
            }
            .txtright {
                width: 43%;
                color: #fff;
                font-family: 'xingxing';
                font-size: 47px;
                line-height: 40vh;
                text-align: left;
                
                /* 文字阴影渐变 */
                animation: san 4s linear infinite;
                transform: rotate(8deg);
            }
            @keyframes san{
                0%,100%{
                    color: rgb(255, 255, 255);         
                    text-shadow: 0 0 5px  #fff,
                                0 0 15px  #fff,
                                0 0 25px  #fff,
                                0 0 50px  #fff;
                }
                40%, 60%{
                    color: rgba(197, 159, 159, 0.5);
                    text-shadow: none;
                } 
            }
        }

        .tomatoMainBottom {
            .w(100%, 60%);

            .function-list {
                .w(60%, calc(100% - 40px));
                margin: 20px auto;

                .funBtn {
                    @funbtnheight: 50px;
                    .w(calc(100% - 10px), @funbtnheight);
                    border: 1px solid #fff;
                    line-height: @funbtnheight;
                    margin-bottom: 20px;
                    text-align: center;
                    font-size: 20px;
                    font-weight: bold;
                    color: #fff;
                    border-radius: 10px;
                    display: flex;
                    justify-content: center;
                    cursor: pointer;
                    .funBtn-one-word {
                        margin: 0px 5px;
                    }
                    @keyframes rotatoz {
                        0%, 100% {
                            transform: rotateY(0deg);
                        }
                        50% {
                            transform: rotateY(180deg);
                        }
                    }
                    &:hover {
                        box-shadow: 0px 0px 5px #fff;
                        .funBtn-one-word { 
                            text-shadow: 0 0 5px  #fff,
                                0 0 15px  #fff,
                                0 0 25px  #fff;
                            transform: rotateY(360deg);
                            transition-duration: 2s;
                            transition-timing-function: ease-in-out;

                        }
                        .funBtn-one-word:nth-child(2n) { 
                            transform: rotateX(360deg);
                            transition-duration: 2s;
                            transition-timing-function: ease-in-out;
                        }
                    }
                }
            }
        }
    }

</style>